import React from 'react';
import { Form, Input, Row, Col, DatePicker, Icon, Popover, Button } from 'antd';
import { connect } from 'dva';
import TableData from '../../components/tableDatas';
import styles from './index.less';
import moment from 'moment';

const namespace = 'returnManagement';
/**
 *  登录界面
 */
@connect(({ loading, returnManagement }) => {
  return {
    //控制状态，绑定事件
    loading: loading.effects['returnManagement/fetch'],
    dataList: returnManagement.dataList,
    pagination: returnManagement.pagination
  };
})
@Form.create()
class Rejected extends React.Component {
  state = {
    tips: [
      {
        id: 0,
        title: 'Estimated Refund',
        money: '$50.00'
      },
      {
        id: 1,
        title: 'Order payment',
        money: '$350.00'
      },
      {
        id: 2,
        title: 'Standard Delivery change',
        money: '-$50.00'
      },
      {
        id: 3,
        title: 'Return cost',
        money: '-$50.00'
      }
    ]
  };

  // 搜索
  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        values.requestDate = values.requestDate ? values.requestDate.format('YYYY-MM-DD') : values.requestDate;
        values.status = values.status === '0' ? '' : values.status;
        this.props.dispatch({
          type: `${namespace}/fetch`,
          payload: { ...values, pageNum: 1 }
        });
      }
    });
  }
  // 清楚搜索框
  handleReset = () => {
    const { pagination, dispatch, form } = this.props;
    form.resetFields();
    dispatch({
      type: `${namespace}/fetch`,
      payload: {
        pageNum: pagination.current,
        pageSize: pagination.pageSize
      }
    });
  };
  // 导入
  handleUpload(file, fileList) {
    console.log(fileList, '数据222', file);
    this.props.dispatch({
      type: `${namespace}/uploadTemplate`,
      payload: {
        file
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { tips } = this.state;
    const { loading, dataList, pagination, handleDrawer } = this.props;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 24 }
      }
    };

    const config = {
      rules: [{ type: 'object', required: false, message: 'Please select time!' }]
    };
    const content = (
      <div>
        {tips.map(item => {
          return (
            <div className={item.id === 0 ? 'ditemTips fontWeightTips' : 'ditemTips'} style={{}} key={item.id}>
              <div className={styles.title}>{item.title}</div>
              <div className={styles.money}>{item.money}</div>
            </div>
          );
        })}
      </div>
    );
    const columns = [
      {
        title: 'Order number',
        dataIndex: 'orderNumber',
        key: 'orderNumber',
        render: (text, record) => (
          <a
            className={styles.orderNumber}
            onClick={() => handleDrawer(record)}
            style={record.remind ? { color: '#B80B12' } : {}}
          >
            {record.remind ? <Icon type="bell" theme="filled" style={{ marginRight: 5 }} /> : null}
            {text}
          </a>
        )
      },
      {
        title: 'Return number',
        dataIndex: 'returnNo',
        key: 'returnNo'
      },

      {
        title: 'Request date',
        dataIndex: 'createTime',
        key: 'createTime',
        sorter: true,
        render: text => <span>{moment(text).format('DD/MM/YYYY')}</span>
      },
      {
        title: 'Product',
        key: 'productName',
        dataIndex: 'productName'
      },

      {
        title: 'QTY',
        dataIndex: 'requestQty',
        key: 'requestQty'
      },
      {
        title: 'Condition',
        dataIndex: 'condition',
        key: 'condition'
      },
      {
        title: () => (
          <div>
            {' '}
            Estimated refund{' '}
            <Popover content={content} trigger="hover">
              <Icon type="question-circle" theme="filled" />
            </Popover>
          </div>
        ),
        dataIndex: 'estimatedRefund',
        key: 'estimatedRefund',
        render: text => <span>${text && text.toFixed(2)}</span>
      }
    ];

    const tableProps = {
      columns,
      dataSource: dataList,
      loading,
      pagination: {
        total: pagination.total,
        current: pagination.current,
        pageSize: pagination.pageSize,
        hideOnSinglePage: true,
        showQuickJumper: true,
        showSizeChanger: true
      },
      rowClassName: 'rows',
      rowKey: 'id',
      onChange: (pagination, filters, sorter, extra) => {
        let sort = '';
        if (sorter.order) {
          sort = sorter.order === 'descend' ? 'DESC' : 'ASC';
        }
        this.props.dispatch({
          type: `${namespace}/fetch`,
          payload: {
            pageNum: pagination.current,
            pageSize: pagination.pageSize,
            sort
          }
        });
      }
    };
    return (
      <div className={styles.formItem}>
        <Form {...formItemLayout} onSubmit={e => this.handleSubmit(e)}>
          <Row gutter={16}>
            <Col className="gutter-row" span={4}>
              <Form.Item label="Return number">{getFieldDecorator('returnNumber', {})(<Input />)}</Form.Item>
            </Col>
            <Col className="gutter-row" span={4}>
              <Form.Item label="Request date">{getFieldDecorator('requestDate', config)(<DatePicker />)}</Form.Item>
            </Col>

            <Col className="gutter-row searchBtn" span={12}>
              <Form.Item>
                <Button htmlType="submit" className="login-form-button searchBtns">
                  Search
                </Button>
              </Form.Item>
              <Form.Item>
                <Button htmlType="reset" onClick={this.handleReset} className="login-form-button">
                  Reset
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <TableData {...tableProps} />
      </div>
    );
  }
}
export default Rejected;
